<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>切换内容写死的选项卡-Vue</title>
    <script src="./vue-2.4.0.js"></script>
    <style>
        .navList {
            width: 100%;
            height: 100px;
            text-align: center;
            background-color: #87ceeb;
            color: white;
            display: flex;
            font-size: 28px;
        }
        
        .navitem {
            width: 25%;
            height: 100px;
            line-height: 100px;
            cursor: pointer;
        }
        
        .active {
            background: #4c8fff;
            color: #FFFFFF;
        }
        
        .showList {
            background-color: aquamarine;
            overflow: auto;
            font-size: 28px;
            text-align: center;
            width: 100%;
            height: 800px;
            font-size: 20px;
        }
        
        .showContent {
            color: black;
            line-height: 800px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <!--选项切换区域-->
            <div class="navList">
                <div class="navitem" v-for="item in navArr" :class="{active:item.id==sel}" @click="change(item)" :key="item.id">{{item.name}}</div>
            </div>
            <!--内容切换区域-->
            <div class="showList">
                <div class="showContent" v-show="sel==1">羽绒服一，羽绒服二，羽绒服三，羽绒服四</div>
                <div class="showContent" v-show="sel==2">牛仔裤一，牛仔裤二，牛仔裤三，牛仔裤四</div>
                <div class="showContent" v-show="sel==3">T恤一，T恤二，T恤三，T恤四</div>
                <div class="showContent" v-show="sel==4">钢笔一，钢笔二，钢笔三，钢笔四</div>
            </div>

        </div>
    </div>
    </div>
    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                navArr: [{
                    name: "羽绒服",
                    id: 1
                }, {
                    name: "牛仔裤",
                    id: 2
                }, {
                    name: "T恤",
                    id: 3,
                }, {
                    name: "钢笔",
                    id: 4,
                }],
                sel: 1,
            },
            methods: {
                change(item) {
                    this.sel = item.id;
                },
            },
        });
    </script>
</body>

</html>